<template>
	<el-form :size="size" :model="model" ref="form1" label-width="100px" :label-position="labelPosition">
		<el-row>
			<el-col :span="16">
				<el-form-item prop="clusterName" label="房间名称"
					:rules="[{ required: true, message: '请输入房间名称', trigger: 'blur' }]">
					<el-input v-model="model.clusterName" placeholder="请输入房间名称" clearable maxlength="100"
						show-word-limit></el-input>
					<el-popover placement="right" width="300" trigger="hover">
						<div class="demo-image">
							<span class="block" v-for="(item,index) in meme">
								<el-image
									style="width: 30px; height: 30px;display: inline-block;margin-right: 10px;margin-bottom: 10px;"
									:src="'./static/images/dst/'+index+'.jpg'" @click="setMeme(index,1)">
								</el-image>
							</span>
						</div>
						<el-button type="success" slot="reference" icon="el-icon-plus" circle>
						</el-button>
					</el-popover>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="16">
				<el-form-item prop="email" label="房间描述">
					<el-input v-model="model.clusterDescription" clearable maxlength="200" show-word-limit
						:rows="1"></el-input>
					<el-popover placement="right" width="300" trigger="hover">
						<div class="demo-image">
							<span class="block" v-for="(item1,index1) in meme">
								<el-image
									style="width: 30px; height: 30px;display: inline-block;margin-right: 10px;margin-bottom: 10px;"
									:src="'./static/images/dst/'+index1+'.jpg'" @click="setMeme(index1,2)">
								</el-image>
							</span>
						</div>

						<el-button type="success" slot="reference" icon="el-icon-plus" circle>
						</el-button>
					</el-popover>
				</el-form-item>
			</el-col>

		</el-row>
		<el-row>
			<el-col :span="15">
				<el-form-item prop="steamGroupId" label="群组id">
					<el-input v-model="model.steamGroupId" clearable maxlength="50" show-word-limit type="textarea"
						:rows="1"></el-input>
				</el-form-item>
			</el-col>
		</el-row>

		<el-row>
			<el-col :span="15">
				<el-form-item prop="region" label="游戏模式">
					<el-radio-group v-model="model.gameMode">
						<el-radio-button label="survival">
							默认
						</el-radio-button>
					</el-radio-group>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="15">
				<el-form-item prop="ss" label="PVP">
					<el-switch v-model="model.pvp" active-text="启动" inactive-text="关闭">
					</el-switch>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="15">
				<el-form-item prop="ss" label="是否投票重启">
					<el-switch v-model="model.voteEnabled" active-text="启动" inactive-text="关闭">
					</el-switch>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="15">
				<el-form-item prop="slider" label="最大玩家数量">
					<el-input-number v-model="model.maxPlayers" @change="handleChange" :min="1" :max="max" label="描述文字"></el-input-number>
					
				</el-form-item>

			</el-col>
		</el-row>
		<el-row>
			<el-col :span="15">
				<el-form-item prop="slider" label="白名单游戏位">
					<el-input-number v-model="model.whitelistSlots" @change="handleChange" :min="1" :max="max" label="描述文字"></el-input-number>
					
				</el-form-item>

			</el-col>
		</el-row>
		<el-row>
			<el-col :span="15">
				<el-form-item prop="email" label="房间密码">
					<el-input v-model="model.clusterPassword" clearable maxlength="20" show-word-limit>
					</el-input>
				</el-form-item>
			</el-col>
		</el-row>


		<el-row>
			<el-col :span="15">
				<el-form-item prop="token" label="令牌" :rules="[{ required: true, message: '请输入令牌', trigger: 'blur' }]">
					<el-input v-model="model.token" placeholder="请输入饥荒账户的令牌" :rows="1" clearable maxlength="100"
						show-word-limit type="textarea">
					</el-input>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="15">
				<el-form-item prop="masterIp" label="主世界IP">
					<el-input v-model="model.masterIp" placeholder="请填写主世界公网ip" :rows="1" clearable maxlength="100"
						show-word-limit type="textarea">
					</el-input>
				</el-form-item>
			</el-col>
		</el-row>
	</el-form>
</template>

<script>
	export default {
		name: 'room',
		props: {
			meme: {
				type: [Array],
				default: []
			},
			model: {
				type: Object,
				default: {}
			},
			size: {
				type: String,
				default: 'medium'
			},
			labelPosition: {
				type: String,
				default: 'left'
			},
			max: {
				type: Number,
				default: 999
			}
		},
		data() {
			return {

			}
		},
		methods: {
			setMeme(val, type) {
				if (type == 1) {
					this.model.clusterName += this.meme[val]

				} else if (type == 2) {
					if (this.model.clusterDescription) {
						this.model.clusterDescription += this.meme[val]
					} else {
						this.model.clusterDescription = this.meme[val]
					}
				}
			},
		}
	}
</script>

<style>
</style>